import React, { FC, useState } from 'react'
import style from './QuestionList.module.scss'
import { Button, Space, Popconfirm, Tag, message } from 'antd'
import { useNavigate, Link } from 'react-router-dom'
import { useRequest } from 'ahooks'

import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  DeleteOutlined,
} from '@ant-design/icons'
type QuestionCardType = {
  _id: string
  title: string

  isPublished: boolean
  isStar: boolean
  answerCount: number
  createdAt: string
}
import { updateQuestionService, duplicateQuestionService } from '../../service/question'
const QuestionCard: FC<QuestionCardType> = (props: QuestionCardType) => {
  const { _id, title, createdAt, answerCount, isPublished, isStar } = props
  const nav = useNavigate()
  const [isStarState, setIsStarState] = useState(isStar)
  const { loading: changeStarLoading, run: changeStar } = useRequest(
    async () => {
      await updateQuestionService(_id, { isStar: !isStar })
    },
    {
      manual: true,
      onSuccess: () => {
        setIsStarState(!isStarState)
        message.success('更新成功')
      },
    }
  )
  const { loading: duplicatedLoading, run: duplicate } = useRequest(
    async () => {
      const data = await duplicateQuestionService(_id)
      return data
    },
    {
      manual: true,
      onSuccess: (result: any) => {
        message.success('复制成功')

        nav(`/question/edit/${result.id}`)
      },
    }
  )
  const { loading: deleteLoading, run: deleteHandler } = useRequest(
    async () => {
      const data = await updateQuestionService(_id, { isDeleted: true })
      return data
    },
    {
      manual: true,
      onSuccess: () => {
        message.success('删除成功')
      },
    }
  )

  return (
    <div className={style.container}>
      <div className={style.title}>
        <div className={style.left}>
          <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
            <Space>
              {isStarState}
              {isStarState && <StarOutlined style={{ color: 'red' }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={style.right}>
          <Space>
            {isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}
            <span>答卷: {answerCount}</span>
            <span>{createdAt}</span>
          </Space>
        </div>
      </div>

      <div className={style['button-container']}>
        <div className={style.left}>
          <Space>
            <Button
              icon={<EditOutlined />}
              type="text"
              size="small"
              onClick={() => nav(`/question/edit/${_id}`)}
            >
              编辑问卷
            </Button>
            <Button
              icon={<LineChartOutlined />}
              type="text"
              size="small"
              onClick={() => nav(`/question/Stat/${_id}`)}
              disabled={!isPublished}
            >
              问卷统计
            </Button>
          </Space>
        </div>
        <div className={style.right}>
          <Space>
            <Button
              type="text"
              icon={<StarOutlined />}
              size="small"
              onClick={changeStar}
              disabled={changeStarLoading}
            >
              {isStarState ? '取消标星' : '标星'}
            </Button>
            <Popconfirm title="确定复制该问卷？" okText="确定" cancelText="取消">
              <Button
                type="text"
                icon={<CopyOutlined />}
                size="small"
                onClick={duplicate}
                disabled={duplicatedLoading}
              >
                复制
              </Button>
            </Popconfirm>
            <Popconfirm title="确定删除该问卷？" okText="确定" cancelText="取消">
              <Button
                type="text"
                icon={<DeleteOutlined />}
                size="small"
                onClick={deleteHandler}
                disabled={deleteLoading}
              >
                删除
              </Button>
            </Popconfirm>
          </Space>
        </div>
      </div>
    </div>
  )
}
export default QuestionCard
